<template>
	<div>
		<h1>1. this的指向问题</h1>
		<el-card>
			<ul>
				<li v-mydirective>1.普通的函数，指向调用者</li>
				<li>2.声明没用调用指向windows</li>
				<li>3.箭头函数中没有自己的this，取决于外层函数的this</li>
				<li>4.Vue中指向当前组件的实例</li>
			</ul>
		</el-card>

		<el-divider></el-divider>
		<h1>2. 数组去重</h1>
		<el-input v-model="arr" placeholder="请输入数字"></el-input>
		<div>{{ qcArr }}</div>
		<el-divider></el-divider>
		<h1>3.判断是否为数组</h1>
		<el-input v-model="isArr" placeholder="请输入数字"></el-input>
		<el-input v-model="type" placeholder="请输入类型"></el-input>
		<div>{{ formartArr }}</div>
		<el-divider></el-divider>
		<h1>表单重复提交</h1>
		<prevent></prevent>
		<el-divider></el-divider>
	</div>
</template>

<script>
	import { unique3, unique2, isArray } from '@/utils/index'
	import prevent from './preventReClick'
	export default {
		data() {
			return {
				arr: '',
				isArr: '',
				type: '',
				newArr: [1, 2, 3]
			}
		},
		components: {
			prevent
		},
		methods: {
			name: function () {
				// console.log(this);
			}
		},
		created() {
			this.name()
		},
		computed: {
			qcArr() {
				return unique3(this.arr.split(''))
			},
			formartArr() {
				let b
				if (this.type == 'arr' && this.isArr.length != 0) {
					b = this.isArr.split('')
				} else {
					b = this.isArr
				}
				return isArray(b)
			}
		},
		watch: {
			arr(val) {
				console.log(unique2(val.split('')))
				//   return 'a'
			}
		}
	}
</script>

<style lang="scss" scoped>
	:deep.el-input__inner {
		width: 50%;
		margin: 10px;
	}
</style>
